<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta content="text/html;charset=utf-8"></meta>
    <title>角色分配</title>
    <link rel="stylesheet" href="/static/js/common/bootstrap/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="/static/css/base.css"></link>
    <script src="/static/js/common/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/js/base/base.js"></script>
    <script>
        //复选框全选/取消全选
        function selectAllBox(data) {
            // alert($(data).attr("checked"));
            if($(data).attr("checked")=='checked'){
                //取消全选
                $("input:checkbox").each(function (index, target) {
                    $(target).attr("checked", false);
                });
            }else{
                //全选
                $("input:checkbox").each(function (index, target) {
                    $(target).attr("checked", true);
                });
            }
        }

        //新增记录视图更新
        function insertRecordView(result) {
            //开头插入
            // append() 方法在被选元素的结尾插入内容。
            // prepend() 方法在被选元素的开头插入内容。
            // after() 方法在被选元素之后插入内容。
            // before() 方法在被选元素之前插入内容
            // $("tr[id^='tr']").first().before("<tr id=\"tr_\">\n" +
            $("tbody").first().prepend("<tr id=\"tr_"+ result.id +"\">\n" +
                    "                    <td id=\"id_\">" + result.id + "</td>\n" +
                    "                    <td id=\"roleName_\">" + result.roleName + "</td>\n" +
                    "                    <td id=\"description_\">" + result.description + "</td>\n" +
                    "                    <td id=\"isAviliable_\">" + result.isAvailable + "</td>\n" +
                    "                    <td>\n" +
                    "                        <button id=\"update_\" type=\"button\" onclick=\"updateRecord(this)\" class=\"btn btn-warning\">修改角色</button>\n" +
                    "                        <button type=\"delete_\" onclick=\"deleteRecord(this)\" class=\"btn btn-danger\">删除角色</button>\n" +
                    "                    </td>\n" +
                    "                </tr>");
        }

        //记录视图倒叙
        function sortRecordView(result) {
            //开头插入
            // append() 方法在被选元素的结尾插入内容。
            // prepend() 方法在被选元素的开头插入内容。
            // after() 方法在被选元素之后插入内容。
            // before() 方法在被选元素之前插入内容
            // $("tr[id^='tr']").first().before("<tr id=\"tr_\">\n" +
            $("#tbody_user").first().append("<tr id=\"tr_"+ result.id +"\">\n" +
                    "                    <td id=\"id_"+ result.id +"\">"+ result.id +"</td>\n" +
                    "                    <td id=\"username_"+ result.id +"\">"+ result.username +"</td>\n" +
                    "                    <td id=\"password_"+ result.id +"\">"+ result.password +"</td>\n" +
                    "                    <td>\n" +
                    "                        <button id=\"addRoles_"+ result.password +"\" type=\"button\" onclick=\"skipAddRoles(this)\" class=\"btn btn-default\">分配角色</button>\n" +
                    "                    </td>\n" +
                    "                </tr>");
        }

        //分页重组
        function updatePageView(listResult) {
            $("#table_pagging").empty();
            // alert($("#table_pagging").text());
            var totalPageNo = listResult.totalPageNo;
            for(var i=1; i<=totalPageNo; i++){
                $("#table_pagging").append("<li id=\"a_"+ i +"\"><a onclick=\"listRecord(this)\" href=\"#\" >"+ i +"</a></li>");
            }
            if(totalPageNo == 0){
                $("#table_pagging").append("<li id=\"a_"+ 1 +"\"><a onclick=\"listRecord(this)\" href=\"#\" >"+ 1 +"</a></li>");
            }
            $("#a_1").addClass("disabled");
            $("#a_1").children().first().attr("onclick", "return false;");

        }

        //记录翻页
        function listRecord(data) {
            var userName = $("#queryUserName").text();
            var pageSize = "${listResult.pageSize}";
            var pageNo = $(data).text();
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            if(userName){
                requestData = requestData + "&username=" + userName;
            }
            <#--alert("${basePath}" + "/user/allotRoles/pageList" + requestData);-->
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/user/allotRoles/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    // alert(result);
                    //清空原记录
                    $("#tbody_user").empty();
                    var rs = JSON.parse(result);
                    var roleList = rs.listResult.list;
                    $.each(roleList, function (index, target) {
                        sortRecordView(target);
                    });
                    //分页不可编辑
                    var disLi = $("li[id^='a_'].disabled");
                    disLi.removeClass("disabled");
                    disLi.children().attr("onclick", "listRecord(this)");
                    $(data).parent().addClass("disabled");
                    $(data).attr("onclick","return false");
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

        //角色分配页弹出
        function skipAddRoles(data) {
            var tdList = $(data).parent().parent().children();
            $("#myModalLabel").html("角色分配");
            $("#modalCancel").html("取消");
            $("#addRole").html("提交");
            $("#myModal").modal("show");
            $("#allotRoleSave").attr("onclick","");
            //设置id
            var userId = tdList.eq(0).text();
            $("#userId").attr("value", userId);

            $("#allotRoleSave").click(function () {
                var url = "${basePath}" + "/user/allotRoles/addRoles";
                var type = "POST";
                alert(userId);
                commitModal(url, type, data);
                $('#allotRoleSave').unbind("click");
            });
            //角色列表
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/role/allotRoles/list?pageFlag=false&userId=" + userId,
                dataType: "html",
                success: function(result){
                    // alert(result);
                    //清空原记录
                    $("#tbody_allot_role").empty();
                    var rs = JSON.parse(result);
                    var roleList = rs.listResult.list;
                    $.each(roleList, function (index, target) {
                        var roleId = target.id;

                        if(target.checkFlag == 0) {
                            $("#tbody_allot_role").append("<tr>\n" +
                                    "                                <td>\n" +
                                    "                                    <input id=\"checkbox_" + roleId + "\" type=\"checkbox\" value=\"" + roleId + "\"></td>\n" +
                                    "                                <td>" + target.roleName + "</td>\n" +
                                    "                                <td>" + target.description + "</td>\n" +
                                    "                            </tr>");
                        }else{
                            $("#tbody_allot_role").append("<tr>\n" +
                                    "                                <td>\n" +
                                    "                                    <input checked=\"checked\" id=\"checkbox_" + roleId + "\" type=\"checkbox\" value=\"" + roleId + "\"></td>\n" +
                                    "                                <td>" + target.roleName + "</td>\n" +
                                    "                                <td>" + target.description + "</td>\n" +
                                    "                            </tr>");

                        }


                    });
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

        //模态窗提交
        function commitModal(url, type, data) {
            var userId = $("#userId").val();
            var roleIdArray = new Array();
            var checkedList = $("input[type='checkbox']:checked");

            $.each(checkedList, function (index, target) {
                roleIdArray[index] = Number($(target).attr('value'));
            });
            var postData = {				//店铺装修信息初始化
                "roleIdList": roleIdArray,
                "userId":userId
            };

            $.ajax({
                type: type,
                url: url,
                data: JSON.stringify(postData),
                dataType: "json",
                contentType : "application/json",
                success: function (resultData) {
                    // alert(resultData);
                    // var result = JSON.parse(resultData);
                    // result['roleName']=roleName;
                    // result['description']=description;
                    // if(isAvailable==1){
                    //     result['isAvailable']="是";
                    // }else {
                    //     result['isAvailable']="否";
                    // }
                    $('#myModal').modal('hide');

                    //视图展示处理
                },
                error: function(data) {
                    alert("error:"+data.responseText);
                }
            });
        }

        //用户查询
        function queryRole(data) {
            var pageSize = "${listResult.pageSize}";
            var pageNo = 1;
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            var userName = $("#queryUserName").val();
            if(userName){
                requestData = requestData + "&username=" + userName
            }
            // alert(requestData);
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/user/allotRoles/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    // alert(result);
                    //清空原记录
                    $("#tbody_user").empty();
                    var rs = JSON.parse(result);
                    var listResult = rs.listResult;
                    var userLists = listResult.list;
                    $.each(userLists, function (index, target) {
                        sortRecordView(target);
                    });
                    //分页不可编辑
                    updatePageView(listResult);
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

    </script>
</head>
<body>
 <@_top.top 1/>
<div class="container" style="padding-bottom: 15px;min-height: 300px; padding-top: 60px;">
    <div class="row">
        <@_left.role 2/>
        <div class="col-md-10">
            <h2>用户列表</h2>
            <hr>
            <form class="form-inline" id="queryForm" role="form">
                <input type="text" name="username" class="form-control" id="queryUserName" placeholder="请输入名称">
                <button type="button" onclick="queryRole(this)" class="btn btn-primary">查询</button>
            </form>
            <hr>
            <table class="table table-hover table-bordered">
                <#--<caption>悬停表格布局</caption>-->
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody_user">
                <#list listResult.list as sysUser>
                <tr id="tr_${sysUser.id}">
                    <td id="id_${sysUser.id}">${sysUser.id?default("未设置")}</td>
                    <td id="username_${sysUser.id}">${sysUser.username?default("未设置")}</td>
                    <td id="password_${sysUser.id}">${sysUser.password?default("未设置")}</td>
                    <td>
                        <button id="addRoles_${sysUser.id}" type="button" onclick="skipAddRoles(this)" class="btn btn-default">分配角色</button>
                    </td>
                </tr>

                </#list>
                </tbody>
            </table>
            <nav aria-label="Page navigation" style="text-align: right">
                <ul class="pagination" id="table_pagging">
                    <#--<li>-->
                        <#--<a href="#" aria-label="Previous">-->
                            <#--<span aria-hidden="true">&laquo;</span>-->
                        <#--</a>-->
                    <#--</li>-->
                    <#assign pageNum=listResult.totalPageNo>
                    <#if pageNum==0>
                        <#assign pageNum=1>
                    </#if>
                    <#list 1..pageNum as pn>
                        <li id="a_${pn}" class="${(pn==listResult.nowPageNo)?string('disabled','')}"><a onclick="listRecord(this)" href="#" >${pn}</a></li>
                    </#list>


                    <#--<li>-->
                        <#--<a href="#" aria-label="Next">-->
                            <#--<span aria-hidden="true">&raquo;</span>-->
                        <#--</a>-->
                    <#--</li>-->
                </ul>
            </nav>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" style="padding-top: 150px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    角色分配
                </h4>
            </div>
            <div class="modal-body">
                <form id="from_addrole" class="form-horizontal" role="form">
                    <div class="form-group hidden">
                        <label for="firstname" class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userId" name="userId" >
                        </div>
                    </div>
                    <div class="form-group">
                        <table class="table  table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="checkRolesAll" value="" onchange="selectAllBox(this)">全选
                                </th>
                                <th>角色名</th>
                                <th>角色描述</th>
                            </tr>
                            </thead>
                            <tbody id="tbody_allot_role">
                            <tr>
                                <td>
                                    <input id="checkbox_" type="checkbox" value=""></td>
                                <td>Bangalore</td>
                                <td>Mumbai</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="modalCancel" onclick="function close() {
                            $('#myModal').modal('hide');
                        }" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" id="allotRoleSave" onclick="" class="btn btn-primary">
                    提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script src="/static/js/common/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>